Exemplars: Create digital wireframes for your portfolio project為作品集專案建立數字線框圖
專案背景與設計目標（Project Prompts and Objectives）
以下三個專案案例展示瞭如何將紙面線框圖發展為完整的數字線框圖，並最終構成完整的使用者流程（user flow）：
- MediMatch Connect建立一個App和響應式網站，幫助使用者查詢、比較、選擇並聯系醫療專業人員。
- Fairweather Pavilion Rentals 設計一個App和漸進式網站，使城市居民能夠預約並支付戶外亭子的租賃費用。
- Go>>Fresh 打造一個App和響應式網站，幫助本地商家管理庫存、新增新庫存、追蹤銷售記錄，並檢視庫存詳情。
線框圖製作流程（From Paper to Digital Wireframes）
第一步：準備紙面線框圖：使用紙和筆繪製關鍵頁面草圖，初步構思頁面結構和功能元素。
第二步：在Figma中建立數字線框圖
- 按照裝置（如手機）尺寸設定畫板（frame）
- 參考紙面線框圖，一一構建圖形、按鈕、導航、文字等介面元素
- 確保每一個頁面的元素位置、功能和結構邏輯一致
第三步：完整使用者流程數字化：不只是首頁，所有關鍵頁面都需轉化為數字線框圖，確保使用者流程完整。
三個數字線框圖示例概覽（Overview of the Three Exemplars）
1 MediMatch Connect– 共4個頁面
首頁（Homepage）
搜尋結果頁（Search Results）
專業人員資料頁（Professional Profile）
聯絡頁面（Contact Professional）
使用者從首頁開始，查詢並最終聯絡一位醫療專業人員，流程清晰且完整。
2 Fairweather Pavilion Rentals– 共4個頁面
首頁（Homepage）
亭子詳情頁（Pavilion Detail Page）
日期預約頁（Date Reservation Page）
支付頁面（Payment Page）
完整展現了從檢視亭子資訊到付款完成的全流程。
3 Go>>Fresh– 共5個頁面
側邊選單（Mobile Menu）
使用者儀表盤（User Dashboard）
新增新庫存（Add New Item）
庫存詳情頁（Item Details）
庫存統計頁（Inventory Statistics）
增加了側邊導航選單，提升操作便捷性，流程更為複雜但邏輯嚴謹。
評價與自檢建議（Key Takeaways & Self-Check）
在對比自己的線框圖和這些案例時，可以自我評估以下幾個問題：
- 是否包含至少三個以上的頁面？
- 是否展現了完整的使用者流程，從起點到完成目標？
- 每個頁面是否清楚地表達了UI元素，如導航欄、按鈕、文字框等？
- 是否體現了良好的頁面資訊結構和視覺層級？
如果你的回答中有任何一個“否”，建議你回到**自我評審活動（Self-review）**中，對現有的數字線框圖進行最佳化。